<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        canvas{
            border: 1px solid red;
        }
    </style>
</head>
<body>
<canvas ID="box" width="500" height="500">您的浏览器不支持画布</canvas>

</body>
<script type="text/javascript">
    //通过画布获取画布
    var box=document.getElementById("box");
    var pen=box.getContext("2d");
    //清除画布
    pen.clearRect(0,0,box.width,box.height);
    //画一条直线(起始点,终点)
    pen.moveTo(100,30);
    pen.lineTo(200,30);
    pen.stroke();


    //画一个三角
    //beginPath()开启一段路径
    pen.beginPath();
    pen.moveTo(100,50);
    pen.lineTo(50,100);
    pen.lineTo(150,100);
    //关闭路径
    pen.closePath();
    pen.stroke();

    //画一个矩形(rect() filllRect() strockRect())
    pen.beginPath();
    pen.rect(160,130,100,150);
    pen.closePath();
    pen.stroke();

    pen.beginPath();
    //filllRect()------填充一个矩形,默认是黑色,不用渲染
    pen.fillStyle="red";
//    pen.fill();
    pen.filllRect(100,300,100,150);
    pen.closePath();


    pen.beginPath();
    //strockRect-------绘制带有矩形边框的矩形,不用渲染,有默认的颜色,也是黑灰
    //strockRect绘制的矩形,设置填充样式的时候,没有效果
    pen.strockRect(300,300,100,150);
    pen.closePath();





</script>
</html>